<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自习室管理</title>
    <script type="text/javascript" src="../lib/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js"></script>
    <script src="../lib/constant.js"></script>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        .myHidden{
            display: none;
        }
    </style>
</head>
<body>
<button class="layui-btn layui-btn-normal" id="addBtn">添加</button>
<table id="demo" lay-filter="test"></table>

<div id="editTable" style="display: none;padding: 15px;">
    <div style="padding-top: 5px;padding-bottom:5px;" id="numDiv">自习室编号:<span id="num"></span></div>
    <form id="myForm">
        <div style="padding-top: 5px;padding-bottom:5px;" id="schoolDiv">
            所属学校:
<!--            <input type="text" id="school" max="100" min="1"/>-->
            <select type="text" id="school">
                <option value ="青岛大学">青岛大学</option>
                <option value ="海洋大学">海洋大学</option>
                <option value="青岛理工大学">青岛理工大学</option>
                <option value="青岛科技大学">青岛科技大学</option>
            </select>
        </div>
        <div style="padding-top: 5px;padding-bottom:5px;">自习室容量(人):<input type="number" id="capacity" max="10" min="1"/></div>
        <div style="padding-top: 5px;padding-bottom:5px;" id="statusDiv">占用状态:<span id="status"></span></div>
    </form>
    <button id="submit" class="layui-btn-normal" style="padding: 8px;"></button>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

    var OBJ;
    var INDEX;
    var table;
    var tableIns;

    $(function(){
        $("#addBtn").click(function () {
            $("#num").val("");
            document.getElementById("myForm").reset();
            $("#status").text("1");
            $("#submit").text("确认添加");
            $("#submit").attr("onclick","addTable()");
            $("#numDiv").attr("class","myHidden");
            INDEX=layer.open({
                type: 1
                ,content: $("#editTable")
            });
        });
    });
    layui.use('table', function(){
        room = layui.table;
        //第一个实例
        tableIns=room.render({
            id:'demo'
            ,elem: '#demo'
            ,width:1145
            ,height: 500
            ,url: '/admin/roomlist' //数据接口
            ,page: true //开启分页
            ,limit: 10
            ,cols: [[ //表头
                {field: 'num', title: '自习室编号', width:120, fixed: 'left'}
                ,{field: 'school', title: '所属学校', width:150,sort:true}
                ,{field: 'capacity', title: '自习室容量(人)', width:150,sort:true}
                ,{field: 'status', title: '占用状态', width:150,sort:true}
                ,{field: 'starttime', title: '占用起始时间', width:200,sort:true}
                ,{field: 'endtime', title: '占用状结束时间', width:200,sort:true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //监听行工具事件
        room.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            OBJ=obj;
            let data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                let r = confirm('真的删除\"'+data.num+'号自习室\"吗？');
                if(r){
                    obj.del(); //删除对应行（tr）的DOM结构
                    //layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type:'post',
                        url: '/admin/deleteRoom',
                        headers: {
                            // "Authorization":getCookie("token"),
                        },
                        data: {
                            "num": data.num
                        },
                        success: function(data) {
                            alert('删除成功');
                            tableIns.reload();
                        }
                    });
                };
            } else if(layEvent === 'edit'){
                $("#numDiv").removeAttr("class");
                $("#num").text(data.num);
                $("#capacity").val(data.capacity);
                $("#submit").text("保存修改");
                $("#submit").attr("onclick","editTable()");
                INDEX=layer.open({
                    type: 1
                    ,content: $("#editTable")
                });

            }
        });
    });

    function addTable() {
        let num = $("#num").val().trim();
        let capacity = $("#capacity").val().trim();
        let school = $("#school option:selected").text();
        // let school = $("#school").val().trim();
        if(!/^[1-9]\d*$/.test(capacity)){
            alert("只能输入正整数!");
            return false;
        }
        $.ajax({
            type:'post',
            url: '/admin/addRoom',
            headers: {
                // "Authorization":getCookie("token"),
            },
            data: {
                "num":num,
                "school":school,
                "capacity":capacity,
            },
            success: function(result) {
                alert(result.msg);
                layer.close(INDEX);
                tableIns.reload();
            }
        });
    }

    function editTable(){
        let capacity = $("#capacity").val().trim();
        let school = $("#school").val().trim();
        if(!/^[1-9]\d*$/.test(capacity)){
            alert("只能输入正整数!");
            return false;
        }
        $.ajax({
            type:'post',
            url: "/admin/editRoom",
            headers: {
                // "Authorization":getCookie("token"),
            },
            data: {
                "num": $("#num").text(),
                "capacity":capacity,
                "school":school
            },
            success: function(data) {
                alert('修改成功');
                OBJ.update({
                    capacity: capacity,
                    school: school
                });
                layer.close(INDEX);
            }
        });
    }


</script>
</body>
</html>